<template>
<div style="padding-top: 20px;">
  <el-page-header style="margin-top: 10px; margin-bottom: 10px;" @back="goBack" content="医师详情页"></el-page-header>
<!--医师资料-->
  <div style="background-color: #cfe0f3;height: 300px;border-radius: 10px;">
    <div style="float: left">
      <img :src="physician.photo" width="150" height="150" class="head_pic"/>
    </div>
    <div class="box-card" style="padding-left: 10px;float: left; width: 600px;">
      <span style="font-size: 20px">{{ physician.nickname }}</span><span style="padding-left: 20px;font-size: 15px">{{ physician.identity }}</span><br />
      <div style="padding-top: 10px">
        <span >{{ physician.hospital.name }}</span><br />
      </div>
      <div style="padding-top: 10px; margin-bottom: 10px">
        <el-tag type="warning" color="#FFEED1" size="25px" style="color: #ff9900;font-size: 15px">{{ physician.department.name }}</el-tag><br />
      </div>
      <span style="color: dimgrey">擅长：</span><span style="padding-top: 10px">{{ physician.specialty }}</span><br />
      <div style="padding-top: 10px; width: 550px" class="text-wrapper">
        <el-popover
          style="float: right"
          placement="bottom"
          width="600"
          trigger="manual"
          :content="physician.outline"
          v-model="visible">
          <el-button style="margin-top: 24px;border: 0;background-color: #cfe0f3; font-size: 15px; padding-left: 0" slot="reference" @click="visible = !visible" >详情</el-button>
        </el-popover>
        <span style="padding-top: 5px" class="line-clamp2"><span style="color: dimgrey">简介：</span>{{ physician.outline }}</span>
<!--        <br />-->

      </div>

    </div>
    <div style="float: left;width: 280px;height: 200px;padding-top: 60px;padding-left: 15px">
      <h3 style="color:#ff9900;">评分</h3>
      <span style="font-size: 15px" v-if="physician.score === null">暂无评分</span>
      <el-rate v-else
        v-model="value"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}"
        :max = 10>
      </el-rate>
      <div style="padding-top: 10px">
        <span style="color:dimgrey; font-size: 15px">问诊量</span>
        <span style="color:#86AFF4; font-size: 15px" v-if="!physician.num">0</span>
        <span style="color:#86AFF4; font-size: 20px">{{ physician.num }}</span>
      </div>

    </div>
  </div>

<!--预约挂号-->
  <div style="padding-top: 20px; border: 1px solid beige; border-radius: 10px; margin-top: 10px; background-color: white">
    <h2 style="color: #409EFF; padding-left: 10px">预约挂号</h2>
    <div v-if="user.id">
    <el-empty description="暂无排班信息" v-if="stages.length === 0"></el-empty>
    <div v-else>
        <el-form ref="form" label-width="80px">
          <el-form-item label="医院">
            <el-input style="width: 200px;" class="form-control" v-model="physician.hospital.name" readonly></el-input>
          </el-form-item>
          <el-form-item label="科室">
            <el-input style="width: 200px" class="form-control" v-model="physician.department.name" readonly></el-input>
          </el-form-item>
          <el-form-item label="排班">
            <el-radio-group v-model="form.staId" size="medium">
              <el-radio border v-for="item in stages" :key="item.id" :label="item.id" :value="item.id">{{item.date + item.timePeriod}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">预约挂号</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-else>
      <el-button @click="$router.push('/login')" type="primary" plain size="medium" style="width: 30%;">登录</el-button>
    </div>

  </div>
<!--患者评价-->
  <div style="padding-top: 20px; border: 1px solid beige; border-radius: 10px; margin-top: 10px; background-color: white">
    <h2 style="color: #409EFF; padding-left: 10px">患者评价</h2>
<!--    <img :src="appraises.user.photo">-->
    <el-empty description="暂无评价" v-if="total === 0"></el-empty>
    <div v-else>
      <div style="margin-bottom: 20px; margin-left: 10px">
        <span style="color: gray; font-size: 10px; ">共 {{total}} 条评论</span>
      </div>
      <el-table :data="tableData" border stripe header-cell-class-name="headerBg">
        <el-table-column prop="user.photo" width="130px">
          <template slot-scope="scope">
            　<img :src="scope.row.user.photo" width="80" height="80" class="head_pic"/>
          </template>
        </el-table-column>
        <el-table-column prop="user.nickname" label="用户" width="100"></el-table-column>

        <el-table-column prop="content" label="评论" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="score" label="评分" width="350px">
          <template slot-scope="scope">
            <el-rate
              v-model="scope.row.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
              :max = 10>
            </el-rate>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  </div>
</template>

<script>
export default {
  name: "PhyInfo",
  data() {
    return {
      physician: {},
      value: 10,
      form: {
        userId: 0,
        num: 0,
        hosId: 0,
        depId: 0,
        phyId: 0,
        date: "",
        staId: 0
      },
      stages: {},
      appraises: {},
      tableData: {},
      total: 0,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      visible: false
    }
  },
  created() {
    console.log("用户：",this.user.nickname)
    this.load()
    this.findAppraise()
  },
  methods: {
    load(){
      this.physician = this.$route.query.physician
      this.value = this.$route.query.physician.score
      this.request.post("/stage/findStageByPhy?id=" + this.physician.id).then(res => {
        console.log("stage: " + res)
        this.stages = res
      })
    },
    onSubmit(){
      this.form.hosId = this.physician.hospital.id
      this.form.depId = this.physician.department.id
      this.form.phyId = this.physician.id
      this.form.userId = this.user.id
      this.form.num = this.getProjectNum() + Math.floor(Math.random() * 10000)
      console.log(this.form)
      this.request.post("/order/edit" ,this.form).then(res => {
        if (res) {
          this.$message.success("预约成功")
        } else {
          this.$message.error("预约失败")
        }
      })
    },
    // 获取当前日期的方法
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = String(Year)
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
    findAppraise(){
      console.log( "医生" + this.physician.id)
      this.request.post("/appraise/phyAppraise?id="+ this.physician.id).then(res => {
        console.log(res)
        this.tableData = res.data
        this.total = res.total
      })
    },
    goBack(){
        this.$router.back()
    }
  }
}
</script>

<style scoped>
.head_pic {
  margin-left: 30px;
  margin-top: 50px;
  border-radius: 50%;
}


.text-wrapper {
  word-break: break-all;
  word-wrap: break-word
}


.box-card {
  width: 500px;
  padding-top: 60px;
}
</style>
